<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我要还款</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <link type="text/css" rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="vue/vue.min.js"></script>
    <script type="text/javascript" src="axios/axios.min.js"></script>
    <script type="text/javascript" src="js/pay_back.js"></script>
    <style type="text/css">
        .btn.active.focus,
        .btn.active:focus,
        .btn.focus,
        .btn:active.focus,
        .btn:active:focus,
        .btn:focus {
            outline: none;
        }

        button {
            outline: none;
        }
    </style>
</head>
<body>
<div id="header"></div>

<div class="container">
    <a href="jump?url=pay_back" class="btn btn-info" style="margin-right: 5px">未还</a>
    <a href="jump?url=pay_back2" class="btn btn-info" style="margin-right: 5px">已还</a>
    <a href="jump?url=pay_back3" class="btn btn-info">逾期</a>
</div>

<div style="margin-top: 10px"></div>

<div id="app" class="container">
    <div v-if="pageInfo.list.length === 0">无</div>
    <div v-else>
        <table class="table table-bordered table-hover">
            <tr>
                <th>#</th>
                <th>待还款金额</th>
                <th>待还款时间</th>
                <th>还款剩余天数</th>
                <th>贷款开始时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in pageInfo.list" :key="item.spbId">
                <td>{{pageInfo.startRow + index}}</td>
                <td>{{item.spbMoney}}</td>
                <td>{{item.spbTime.substr(0,10)}}</td>
                <td>{{remainderDays(item.spbTime)}}</td>
                <td>{{item.lendingTime.substr(0,10)}}</td>
                <td>{{item.spbStatus}}</td>
                <td><button @click="payBack(item)" class="btn btn-success" data-toggle="modal" data-target="#myModal">还款</button></td>
            </tr>
        </table>

        <div class="row">
            <div class="col-md-6">
                <span style="font-size: 18px">当前第{{pageInfo.pageNum}}页，共{{pageInfo.pages}}页，共{{pageInfo.total}}条记录</span>
            </div>
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li v-if="pageInfo.isFirstPage" class="disabled"><a @click.prevent="" aria-label="Previous"><span aria-hidden="true">首页</span></a></li>
                        <li v-else>
                            <a @click.prevent="findShouldPayBackCustomByLoanIdByPage(pageInfo.navigateFirstPage, pageInfo.pageSize)" aria-label="Previous">
                                <span aria-hidden="true">首页</span>
                            </a>
                        </li>
                        <li v-if="pageInfo.hasPreviousPage">
                            <a @click.prevent="findShouldPayBackCustomByLoanIdByPage(pageInfo.prePage , pageInfo.pageSize)" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-else class="disabled"><a @click.prevent="" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        <li v-for="pageNum in pageInfo.navigatepageNums" :key="pageNum" :class="pageNum == pageInfo.pageNum?'active':''"><a @click.prevent="findShouldPayBackCustomByLoanIdByPage(pageNum, pageInfo.pageSize)">{{pageNum}}</a></li>
                        <li v-if="pageInfo.hasNextPage">
                            <a @click.prevent="findShouldPayBackCustomByLoanIdByPage(pageInfo.nextPage, pageInfo.pageSize)" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li v-else class="disabled"><a @click.prevent="" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                        <li v-if="pageInfo.isLastPage" class="disabled"><a @click.prevent="" aria-label="Next"><span aria-hidden="true">尾页</span></a></li>
                        <li v-else>
                            <a @click.prevent="findShouldPayBackCustomByLoanIdByPage(pageInfo.navigateLastPage, pageInfo.pageSize)" aria-label="Next">
                                <span aria-hidden="true">尾页</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">还款</h4>
                    </div>
                    <div class="modal-body">
                        <!-- 这里放置 modal 的表单 -->
                        <div class="ibox-content">
                            <form id="updateForm" method="post" class="form-horizontal" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">还款金额</label>
                                    <div class="col-sm-3">
                                        <input type="text" id="spbMoney" name="spbMoney" :value="spb.spbMoney" class="form-control" readonly>
                                    </div>
                                    <label class="col-sm-offset-1 col-sm-2 control-label">待还款时间</label>
                                    <div class="col-sm-3">
                                        <input type="text" id="spbTime" name="spbTime" :value="spb.spbTime" class="form-control" readonly>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">剩余天数</label>
                                    <div class="col-sm-3">
                                        <input type="text" id="remainderDays" name="remainderDays" :value="remainderDays(spb.spbTime)" class="form-control" readonly>
                                    </div>
                                    <label class="col-sm-offset-1 col-sm-2 control-label">贷款开始时间</label>
                                    <div class="col-sm-3">
                                        <input type="text" id="lendingTime" name="lendingTime" :value="spb.lendingTime" class="form-control" readonly>
                                    </div>
                                </div>
                                <!--                            <div class="form-group">-->
                                <!--                                <div class="col-sm-offset-4 col-sm-4" style="text-align: center">-->
                                <!--                                    <img src="images/makeCollections.png" width="223px" height="306px" />-->
                                <!--                                    <label>扫码支付</label>-->
                                <!--                                </div>-->
                                <!--                            </div>-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">支付方式</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" v-model="payMethod">
                                            <option value="零钱">零钱</option>
                                            <option value="微信">微信</option>
                                            <option value="支付宝">支付宝</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="payBackSuccess">完成</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="margin-top: 70px;"></div>

<div id="footer"></div>
</body>
</html>